<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    
    <h:head></h:head>
    <h:body>
        <ui:composition template="/apps/hotel.xhtml">
            <ui:define name="content">
                <h:form>
                    <h:panelGrid columns="2" style="margin-left:auto; margin-right:auto;">
                        <h:outputLabel value="Room class: " />
                        <h:selectOneMenu value="#{accommodationControllerBean.roomClass}">
                            <f:selectItems value="#{accommodationControllerBean.roomClassValues}" />
                        </h:selectOneMenu> 
                        <h:outputLabel value="Floor: " />
                        <h:selectOneMenu value="#{accommodationControllerBean.floor}">
                            <f:selectItems value="#{accommodationControllerBean.floorValues}" />
                        </h:selectOneMenu> 
                        <h:outputLabel value="Quantity: " />
                        <h:selectOneMenu value="#{accommodationControllerBean.quantity}">
                            <f:selectItems value="#{accommodationControllerBean.quantityValues}" />
                        </h:selectOneMenu> 
                        <div/>
                        <h:commandButton value="Search" action="#{accommodationControllerBean.findRoom()}" style="margin-top:10px;"/>
                    </h:panelGrid>
                </h:form>
                <br/>
                <!-- Result section -->
                <div align="center" style="width:100%;">
                    <h:outputText value="Available rooms"
                                  style="text-align:center; font-size:large; font-weight:bold;"
                                  rendered="#{accommodationControllerBean.rooms != null}"/>
                </div>
                <a4j:jsFunction name="selectRoom" render="resultTable">
                    <a4j:param name="selectedRoomId" assignTo="#{accommodationControllerBean.selectedRoomId}"/>
                </a4j:jsFunction>
                <rich:extendedDataTable value="#{accommodationControllerBean.rooms}"
                                        var="room"
                                        rendered="#{accommodationControllerBean.rooms != null}"
                                        id="resultTable"
                                        style="width:100%;"
                                        rowKeyVar="index"
                                        selectionMode="single"
                                        onrowclick="selectRoom('#{room.id}');">
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="#" />
                        </f:facet>
                        <h:outputText value="#{room.id}" id="roomId" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="Room class" />
                        </f:facet>
                        <h:outputText value="#{room.roomClass}" id="roomClass" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="Floor" />
                        </f:facet>
                        <h:outputText value="#{room.floor}" id="roomFloor" />
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:outputText value="Room quantity" />
                        </f:facet>
                        <h:outputText value="#{room.roomQuantity}" id="roomQuantity" />
                    </rich:column>
                </rich:extendedDataTable>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
